<template>
  <div class="container">
    <el-row>
    <span></span>
    <span>{{$route.query.tableId}}</span>
    </el-row>
  <el-table
    :data="menuList"
    style="width: 100%">
    <el-table-column
      label="菜单号">
      <!-- 插槽，类似迭代变量 -->
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuId }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品名称">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="菜品价格">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuPrice }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="订单支付状态">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.menuState }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
        size="mini"
        @click="reduce(scope.row)"><i class="el-icon-minus"></i></el-button>
        <span style="margin-left: 10px">{{ scope.row.menuNum }}</span>&nbsp;&nbsp;&nbsp;
        <el-button
          size="mini"
          @click="add(scope.row)"><i class="el-icon-plus"></i></el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="block">
      <!-- page-size="5" 默认每页显示条数 -->
      <el-pagination
        @size-change="selectPage"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div style="float: right;margin-right: 50px;margin-top: -30px;">
        <el-button type="primary" plain @click="pay">支付订单</el-button>
    </div>

    <!-- 支付弹窗 -->
        <el-dialog title="扫描支付" :visible.sync="isShow" width="30%">

              <div id="code" style="width:300px;height: 300px;" ></div>

          </el-dialog>

</div>
</template>

<script>
  export default {
    name: "menuListEle",  //tableListEle只是一个属性描述，
    data() {
      return {
        userName:"",
        userId:0,

        menuList: [],
        menuForm: { // 表单的请求对象
          //userId:null,
          tableId:null,
          menuId: null,
          menuName: "",
          menuNum:null,
          menuCost: null,
          menuPrice: null,
          menuDepartment: "",
          menuState:""
        },
        total: 0,  //总条数
        totalPage: 0,   //总页数
        curPage: 1,   //当前页
        rows:5,     //每页条数
        isShow:false,
        title:""
      }
    },
    methods: {

      loaddata() { // 加载函数
        var mythis = this;
        //var userId = localStorage.getItem("userId");
        var tableId = localStorage.getItem("tableId");
        $.ajax({
          url: "http://localhost:8080/api/allUtMenuInfo",
          type: "get",
          data: {
            "page": mythis.curPage,
            "row": mythis.rows,
            //"userId":userId,
            "tableId":tableId
          },
          dataType:"json",
          success: function(data) {
            console.log(data);
            mythis.menuList = data.info;
            mythis.total = data.total;
            mythis.totalPage = data.totalPage;
          }
        })
      },
      reduce(x){
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/deleteUtMenuInfo",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(x),
          success:function(){
            //刷新
            mythis.loaddata();
          }
        })
      },
      add(x){
        var mythis = this;
        $.ajax({
          url: "http://localhost:8080/api/addUtMenuInfo",
          type: "post",
          contentType: "application/json",
          data: JSON.stringify(x),
          success:function(){
            //刷新
            mythis.loaddata();
          }
        })
      },
      pay(){
        /* //清空
        document.getElementById("code").innerHTML="" */
        //显示弹窗
        this.isShow = true;
        var mythis = this;
        var tableId = localStorage.getItem("tableId");
        //清空
        if(document.getElementById("code")){
            document.getElementById("code").innerHTML = "";
        }
        $.ajax({
            url:"http://localhost:8080/ali/pay02",
            type:"get",
            data:{"tableId":tableId},
            success:function(data){
                if(data.url!="error"){
                  var qrcode = new QRCode(document.getElementById("code"), {
                                             width : 300,
                                             height : 300
                   });
                   //成才二维码
                   qrcode.makeCode(data.url);

                    var  socke = new WebSocket("ws://yq9wh2.natappfree.cc/payServer");

                    socke.onopen=function(){

                    }
                    socke.onclose=function(){

                    }
                    socke.onerror=function(){

                    }
                    //接收服务端发送的信息
                    socke.onmessage=function(data){
                      console.log(data)
                      if(data.data=="ok"){
                        //关闭窗口
                        mythis.isShow = false;
                        //刷新
                        mythis.loaddata();
                      }

                    }

                }else{
                  mythis.$alert("生成二维码失败");
                }

            }
        })
      },
      selectPage(v) { //用户选择页数
        this.rows = v;
        this.loaddata();
      },
      // v 传递选择的页数
      handleCurrentChange(v){ //当前页触发事件
        this.curPage=v;
        this.loaddata();
      }
    },
    mounted() {
      var user = sessionStorage.getItem("user");
      var jsonUser = JSON.parse(user);
      this.userName =  jsonUser.userName;
      this.userId =  jsonUser.userId;
      this.loaddata();
    }
  }
</script>

<style>
</style>
